<template>
  <div>
    <!-- 标题 -->
    <v-header></v-header>
    <header>
      <!-- 头部上半部分 -->
      <div class="header_top">
        <van-icon name="location-o" class="i" />
        <img src="../../assets/images/white.png" alt="" />
        <input type="text" class="iconfont" placeholder="按内容搜索" @keyup.enter='search(info)' v-model="info"/>
        <van-icon name="shop-o" class="em" />
      </div>
      <!-- 分类标签 -->
      <van-tabs
        v-model="active"
        background="transparent"
        title-active-color="white"
        title-inactive-color="white"
        line-height="6px"
        line-width="20px"
        color="white"
      >
        <!-- 每一项 -->
        <van-tab
          v-for="item in indexCate"
          :key="item.id"
          :title="item.catename"
          to="/index/cates"
        ></van-tab>
      </van-tabs>
    </header>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in indexBanner" :key="item.id">
        <img :src="'http://localhost:3000' + item.img" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 分类 -->
    <van-grid :border="false" :column-num="5">
      <van-grid-item>
        <van-image :src="img.img1" />
        限时秒杀
      </van-grid-item>
      <van-grid-item>
        <van-image :src="img.img2" />
        畅销商品
      </van-grid-item>
      <van-grid-item>
        <van-image :src="img.img3" />
        品质大牌
      </van-grid-item>
      <van-grid-item>
        <van-image :src="img.img4" />
        小U自营
      </van-grid-item>
      <van-grid-item>
        <van-image :src="img.img5" />
        积分商城
      </van-grid-item>
    </van-grid>
    <!-- 活动专区 -->
    <div id="ActivityArea" class="clearfix">
      <div class="ltsk fl">
        <div class="l_title">
          <p class="l_more fixclaer">限时秒杀<span>查看更多&nbsp;></span></p>
          <p></p>
          <p class="l_msg">每天0点场，好货秒不停</p>
          <div class="l_time">
            <div>05</div>
            :
            <div>20</div>
            :
            <div>48</div>
          </div>
        </div>
      </div>
      <div class="NewBrand fl">
        <div class="n_title">
          <p class="n_more">品牌上新</p>
          <p></p>
          <p class="n_msg">9点整，抢大牌</p>
          <p class="RedEnvelopes">疯抢红包></p>
        </div>
      </div>
      <!-- 日用好物 -->
      <div class="NiceGoods fl">
        <div class="ng_title">
          <p class="ng_more">日用好物</p>
          <p></p>
          <p class="ng_msg">愿君多采撷</p>
          <p class="ticket">塞满奖券></p>
        </div>
      </div>
    </div>
    <!-- 双十一尖货预购与畅购全球 -->
    <div class="global_buy">
      <van-tabs background="white" title-active-color="#ff9580" color="white">
        <van-tab title="双十一尖货预购">
          <van-grid :border="false" :column-num="4">
            <van-grid-item>
              <van-image :src="img.i01" />
            </van-grid-item>
            <van-grid-item>
              <van-image :src="img.i02" />
            </van-grid-item>
            <van-grid-item>
              <van-image :src="img.i03" />
            </van-grid-item>
            <van-grid-item>
              <van-image :src="img.i04" />
            </van-grid-item>
          </van-grid>
        </van-tab>
        <van-tab title="畅购全球">
          <van-grid :border="false" :column-num="4">
            <van-grid-item>
              <van-image :src="img.i01" />
            </van-grid-item>
            <van-grid-item>
              <van-image :src="img.i02" />
            </van-grid-item>
            <van-grid-item>
              <van-image :src="img.i03" />
            </van-grid-item>
            <van-grid-item>
              <van-image :src="img.i04" />
            </van-grid-item>
          </van-grid>
        </van-tab>
      </van-tabs>
      <!-- 首页下边的商品们 -->
      <van-tabs type="card" color="#FEA613">
        <van-tab title="热门推荐">
          <template v-if="is_val">
            <div
              class="goods"
              v-for="item in indexGoods[0].content"
              :key="item.id"
            >
              <van-image
                width="1rem"
                height="1rem"
                fit="contain"
                :src="'http://localhost:3000' + item.img"
              />
              <div>
                <p class="goods_title">{{ item.goodsname }}</p>
                <p class="now_price">现价格：￥{{ item.price }}</p>
                <p class="old_price">
                  <del>原价格：￥{{ item.market_price }}</del>
                </p>
                <van-button type="primary" size="mini" color="#FEA613" hairline :to="'/detail/'+item.id+'/'+item.goodsname"
                  >立即抢购</van-button
                >
              </div>
            </div>
          </template>
        </van-tab>
        <van-tab title="上新推荐">
          <template v-if="is_val">
            <div
              class="goods"
              v-for="item in indexGoods[1].content"
              :key="item.id"
            >
              <van-image
                width="1rem"
                height="1rem"
                fit="contain"
                :src="'http://localhost:3000' + item.img"
              />
              <div>
                <p class="goods_title">{{ item.goodsname }}</p>
                <p class="now_price">现价格：￥{{ item.price }}</p>
                <p class="old_price">
                  <del>原价格：￥{{ item.market_price }}</del>
                </p>
                <van-button type="primary" size="mini" color="#FEA613" hairline :to="'/detail/'+item.id+'/'+item.goodsname"
                  >立即抢购</van-button>
              </div>
            </div>
          </template>
        </van-tab>
        <van-tab title="所有商品">
          <template v-if="is_val">
            <div
              class="goods"
              v-for="item in indexGoods[2].content"
              :key="item.id"
            >
              <van-image
                width="1rem"
                height="1rem"
                fit="contain"
                :src="'http://localhost:3000' + item.img"
              />
              <div>
                <p class="goods_title">{{ item.goodsname }}</p>
                <p class="now_price">现价格：￥{{ item.price }}</p>
                <p class="old_price">
                  <del>原价格：￥{{ item.market_price }}</del>
                </p>
                <van-button type="primary" size="mini" color="#FEA613" hairline :to="'/detail/'+item.id+'/'+item.goodsname"
                  >立即抢购</van-button>
              </div>
            </div>
          </template>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import {
  getIndexCates,
  getIndexBanners,
  getIndexGoods,
} from "@/request/api.js";
import img1 from "@/assets/images/seckill.png";
import img2 from "@/assets/images/top.png";
import img3 from "@/assets/images/brand.png";
import img4 from "@/assets/images/selfsupport.png";
import img5 from "@/assets/images/integral.png";
import i01 from "@/assets/images/1.png";
import i02 from "@/assets/images/2.png";
import i03 from "@/assets/images/3.png";
import i04 from "@/assets/images/4.png";
export default {
  data() {
    return {
      active: 0,
      value: "",
      img: {
        img1,
        img2,
        img3,
        img4,
        img5,
        i01,
        i02,
        i03,
        i04,
      },
      indexCate: [],
      indexBanner: [],
      indexGoods: [],
      is_val: false,
      info:''
    };
  },
  methods: {
    search(info){
      this.$router.push('/search?keyword='+info)
    },
    async get_msg() {
      //分类
      let indexCate = await getIndexCates();
      this.indexCate = indexCate.data.list;
      //轮播图
      let indexBanner = await getIndexBanners();
      this.indexBanner = indexBanner.data.list;
      //商品
      let indexGood = await getIndexGoods();
      this.indexGoods = indexGood.data.list;
      this.$nextTick(() => {
        this.is_val = true;
      });
    },
  },
  created() {
    this.get_msg()
  },
};
</script>

<style scoped>
.global_buy {
  padding-top: 10px;
  width: 100vw;
  background-color: #fff;
}
header {
  background-image: url(./images/index_bg.jpg);
}
.header_top {
  /* background-color: rgb(255, 99, 71); */
  height: 0.32rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.header_top .i {
  font-size: 0.2rem;
  color: #ffffff;
}
.header_top img {
  width: 0.91rem;
  height: 0.24rem;
}
.header_top input {
  padding-left: 0.12rem;
  box-sizing: border-box;
  background: #ffffff;
  border: 0.01rem solid #e6e6e6;
  border-radius: 0.03rem;
  width: 1.7rem;
  height: 0.32rem;
  font-family: PingFangSC-Regular;
  font-size: 0.14rem;
  color: #999999;
  letter-spacing: 0;
  line-height: 0.22rem;
}
.header_top .em {
  font-size: 0.2rem;
  color: #ffffff;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 0.2rem;
  /* line-height: 150px; */
  text-align: center;
  /* background-color: #39a9ed; */
}
.my-swipe .van-swipe-item img {
  height: 1.5rem;
  width: 100%;
}
.van-grid .van-grid-item {
  font-size: 0.14rem;
}
#ActivityArea {
  height: 1.75rem;
  padding: 0.1rem;
}
.ltsk {
  height: 1.75rem;
  width: 1.75rem;
  background-image: url(./images/big.png);
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 0.05rem;
}
.l_title .l_more {
  padding: 0.1rem 0.15rem 0.1rem 0.1rem;
  font-family: PingFangSC-Semibold;
  font-size: 0.16rem;
  color: #85a642;
  line-height: 0.16rem;
  font-weight: 600;
}
.l_title .l_more span {
  font-family: PingFangSC-Light;
  font-size: 0.1rem;
  color: #333333;
  text-align: right;
  line-height: 0.1rem;
  float: right;
  line-height: 0.16rem;
}
.l_title .l_msg {
  font-family: PingFangSC-Light;
  font-size: 0.1rem;
  color: #b1cc7a;
  line-height: 0.1rem;
  margin-left: 0.1rem;
}
.l_title .l_time {
  width: 0.7rem;
  height: 0.18rem;
  display: flex;
  justify-content: space-between;
  margin: 0.05rem 0 0 0.1rem;
}
.l_title .l_time div {
  width: 0.2rem;
  font-family: DINCondensed-Bold;
  font-size: 0.14rem;
  color: #ffffff;
  text-align: center;
  line-height: 0.18rem;
  background-image: linear-gradient(180deg, #85a642 0%, #b1cc7a 100%);
  border-radius: 0.01rem;
}
.NewBrand {
  height: 0.85rem;
  width: 1.75rem;
  background-image: url(./images/small.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.n_title .n_more {
  padding: 0.1rem 0.15rem 0.1rem 0.1rem;
  font-family: PingFangSC-Semibold;
  font-size: 0.16rem;
  color: #ff6040;
  line-height: 0.16rem;
  font-weight: 600;
}
.n_title .n_msg {
  font-family: PingFangSC-Light;
  font-size: 0.1rem;
  color: #ff9580;
  line-height: 0.1rem;
  margin-left: 0.1rem;
}
.n_title .RedEnvelopes {
  text-align: center;
  margin: 0.04rem 0 0 0.1rem;
  width: 0.7rem;
  height: 0.2rem;
  background-image: linear-gradient(180deg, #ff6040 0%, #ff9f80 100%);
  border-radius: 0.02rem 0.12rem 0.12rem 0.02rem;
  font-family: PingFangSC-Medium;
  font-size: 0.1rem;
  color: #ffffff;
  line-height: 0.2rem;
}
.NiceGoods {
  margin-top: 0.05rem;
  height: 0.85rem;
  width: 1.75rem;
  background-image: url(./images/02.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.ng_title .ng_more {
  padding: 0.1rem 0.15rem 0.1rem 0.1rem;
  font-family: PingFangSC-Semibold;
  font-size: 0.16rem;
  color: #af40ff;
  line-height: 0.16rem;
  font-weight: 600;
}
.ng_title .ng_msg {
  font-family: PingFangSC-Light;
  font-size: 0.1rem;
  color: #ca80ff;
  line-height: 0.1rem;
  margin-left: 0.1rem;
}
.ng_title .ticket {
  text-align: center;
  margin: 0.04rem 0 0 0.1rem;
  width: 0.7rem;
  height: 0.2rem;
  background-image: linear-gradient(180deg, #af40ff 0%, #f58cff 100%);
  border-radius: 0.02rem 0.12rem 0.12rem 0.02rem;
  font-family: PingFangSC-Medium;
  font-size: 0.1rem;
  color: #ffffff;
  line-height: 0.2rem;
}
.goods {
  margin: 0.1rem auto;
  box-shadow: 0.02rem 0.02rem #ccc;
  width: 85%;
  border: 1px solid #ccc;
  padding: 0.1rem;
  display: flex;
  justify-content: space-evenly;
}
.goods div {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.goods div .goods_title {
  font-size: 0.14rem;
}
.goods div .now_price {
  color: red;
  font-size: 0.14rem;
}
.goods div .old_price del {
  color: #ccc;
  font-size: 0.14rem;
}
</style>